<template>
  <div class="pc-token inner-box">
    <bread backTitle="Token"></bread>
    <main-coin></main-coin>
    <!-- 代币头部 -->
    <h2>{{$t('token.tokenList')}}</h2>
    <div class="token-table">
      <div class="head flex-between">
        <span class="token-count">{{$t('token.total',[pages.total])}}</span>
        <el-autocomplete
          suffix-icon="el-icon-search"
          class="search-input"
          v-model="coinSearch"
          :fetch-suggestions="querySearch"
          :placeholder="$t('token.keyword')"
          :trigger-on-focus="false"
          @select="searchToken(coinSearch)"
          @keyup.enter.native="searchToken(coinSearch)"
        >
          <template slot-scope="{item}">
            <div class="search-symbol-item flex-left">
              <img :src="item.icon" />
              <span>{{item.value}}</span>
            </div>
          </template>
        </el-autocomplete>
      </div>
      <!-- 表格部分 -->
      <el-table
        :data="Tokens"
        stripe
        style="width: 100%"
        class="data-table table-shadow"
        header-cell-class-name="table-font"
        @sort-change="sortToken"
      >
        <template slot="empty">
          <div>
            <div
              v-if="!LoadingSucc"
              class="loading-line"
              v-loading="!LoadingSucc"
              element-loading-text="Loading..."
              element-loading-spinner="el-icon-loading"
            ></div>
            <span v-else>{{$t('page.nodata')}}</span>
          </div>
        </template>
        <el-table-column prop="index" :label="$t('token.id')" width="130"></el-table-column>
        <el-table-column prop="blockTime" :label="$t('token.title')" width="160">
          <template slot-scope="item">
            <router-link
              class="flex-left token-box"
              :to="`/tokenDetail?TokenName=${item.row.symbol}`"
            >
              <img :src="item.row.icon" class="token-icon" />
              <span class="light">{{item.row.symbol}}</span>
            </router-link>
          </template>
        </el-table-column>
        <el-table-column :label="$t('token.introduce')">
          <template slot-scope="item">
            <pre class="introduce">{{item.row.name}}<br />{{introFilter(item.row)}}</pre>
          </template>
        </el-table-column>
        <!-- <el-table-column prop="holders" label="持有人" width="120" sortable="custom"></el-table-column> -->
        <el-table-column :label="$t('token.time')" width="150">
          <template slot-scope="item">
            <span>{{item.row.createdTime|formatTime('yyyy-MM-dd')}}</span>
          </template>
        </el-table-column>
      </el-table>
      <!-- 底部分页 -->
      <div class="bottom-page flex-right">
        <page-container
          @pageChange="pageChange"
          @sizeChange="sizeChange"
          :currentPage="pages.currentPage"
          :pageSize="pages.pageSize"
          :total="pages.total"
        ></page-container>
      </div>
    </div>
  </div>
</template>

<script>
import MainCoin from "./MainCoin";
import Bread from "@/components/computer/Breadcrumb.vue";
import PageContainer from "@/components/computer/PageContainer.vue";
import TokenBase from "@/mixins/Token/tokenList.js";
export default {
  mixins: [TokenBase],
  components: {
    Bread,
    MainCoin,
    PageContainer
  }
};
</script>

<style lang="scss">
.pc-token {
  .bottom-page {
    margin-top: 23px;
  }
  h2 {
    margin-top: 30px;
    font-size: 16px;
    font-family: PingFangSC-Semibold;
    font-weight: 500;
    color: $black_title;
  }
  .token-count {
    display: inline-block;
    padding-top: 20px;
    font-size: 14px;
    font-weight: 400;
    color: $black_title;
  }
  .search-input {
    width: 310px;
    input {
      border-radius: 25px;
      border: 1px solid rgba(222, 225, 230, 1);
    }
  }
  .data-table {
    margin-top: 15px;
    border-radius: 2px;
    border: 1px solid rgba(235, 239, 241, 1);
    font-size: 14px;
    color: $black;
    .table-font {
      color: $black;
      font-weight: 600;
    }
    tr td:nth-of-type(1) {
      padding-left: 10px;
    }
    .introduce {
      white-space: pre-wrap;
      // text-indent: 2em;
      padding-right: 3em;
      text-align: left;
      pre {
        line-height: 1.5em;
        // white-space: pre-wrap;
        font-size: 12px;
        font-family: sans-serif;
      }
    }
    .token-icon {
      margin-right: 13px;
      height: 26px;
    }
    .token-box {
      min-width: 120px;
      margin: 0 auto;
      cursor: pointer;
    }
    .loading-line {
      height: 60px;
      line-height: 18px;
    }
  }
}
.search-symbol-item {
  padding: 5px 0;
  color: $black;
  transition: 0.3s;
  img {
    margin-right: 14px;
    height: 26px;
  }
}
.search-symbol-item:hover {
  color: $group_title;
}
</style>
